@import './com';

header {
    .head_top {
        width: vw(750);
        height: vw(76);
        margin-top: vw(49);
        display: flex;
        justify-content: space-between;
        a {
            margin-left: vw(23);
            width: vw(127);
            height: vw(57);
            border: vw(1) solid $col;
            border-radius: vw(30);
            text-align: center;
            line-height: vw(57);
            font-size: vw(26);
        }
        span {
            margin-top: vw(17);
            font-size: vw(26);
        }
        .sel {
            margin-right: vw(24);
            position: relative;
            select {
                width: vw(160);
                height: vw(57);
                border: vw(1) solid $col;
                outline: none;
                -webkit-appearance: none;
                font-size: vw(26);
                background-color: #fff;
            }
            &::after {
                content: '';
                position: absolute;
                margin-top: vw(-18);
                top: 50%;
                right: vw(16);
                width: 0;
                height: 0;
                border-top: vw(20) solid $col;
                border-right: vw(20) solid transparent;
                border-bottom: vw(20) solid transparent;
                border-left: vw(20)  solid transparent;
                pointer-events: none;
            }
        }
    }

    .cfc {
        width: vw(750);
        height: vw(200);
        display: flex;
        justify-content: space-around;
        .box {
            width: vw(149);
            height: vw(149);
            text-align: center;
            a {
                img {
                    width: vw(148);
                    height: vw(149);    
                }
            }
        }
        
    }

    .box_bottom {
        width: vw(750);
        text-align: center;
        span:first-of-type {
            display: inline-block;
            background-color: $col;
            width: vw(20);
            height: vw(20);
            border-radius: 50%;
        }
        span:nth-of-type(2),span:nth-of-type(3)
        ,span:nth-of-type(4) {
            display: inline-block;
            background-color: $col;
            width: vw(20);
            height: vw(20);
            border-radius: 50%;
            opacity: .5;
        }
    }
}

main {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content1 {
        width: vw(750);
        height: vw(250);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .content_box1 {
            display: flex;
            justify-content: space-between;
            div:first-of-type {
                img{
                    width: vw(54);
                    height: vw(42);
                    margin-left: vw(24);
                    vertical-align: bottom;
                }
                span {
                    font-size: vw(30);
                }
            }

            div:nth-of-type(2) {
                margin-top: vw(10);
                img{
                    width: vw(27);
                    height: vw(27);
                    margin-right: vw(24);
                    vertical-align: bottom;
                }
                span {
                    font-size: vw(24);
                }
            }
        }
        .content_box2 {
            display: flex;
            justify-content: space-around;
            img {
                width: vw(135);
                height: vw(135);
            }
        }
    }

    .content2 {
        width: vw(750);
        height: vw(300);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .content_box1 {
            display: flex;
            justify-content: space-between;
            div:first-of-type {
                img{
                    width: vw(47);
                    height: vw(58);
                    margin-left: vw(24);
                    vertical-align: bottom;
                }
                span {
                    font-size: vw(30);
                }
            }

            div:nth-of-type(2) {
                margin-top: vw(25);
                img{
                    width: vw(27);
                    height: vw(27);
                    margin-right: vw(24);
                    vertical-align: bottom;
                }
                span {
                    font-size: vw(24);
                }
            }
        }
        .content_box2 {
            display: flex;
            justify-content: space-around;
            img {
                width: vw(135);
                height: vw(135);
            }
        }
    }

    .content3 {
        width: vw(750);
        height: vw(300);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .content_box1 {
            display: flex;
            justify-content: space-between;
            div:first-of-type {
                img{
                    width: vw(53);
                    height: vw(52);
                    margin-left: vw(24);
                    vertical-align: bottom;
                }
                span {
                    font-size: vw(30);
                }
            }

            div:nth-of-type(2) {
                margin-top: vw(20);
                img{
                    width: vw(27);
                    height: vw(27);
                    margin-right: vw(24);
                    vertical-align: bottom;
                }
                span {
                    font-size: vw(24);
                }
            }
        }
        .content_box2 {
            display: flex;
            justify-content: space-around;
            img {
                width: vw(135);
                height: vw(135);
            }
        }
    }
}

nav {
    position: fixed;
    bottom: 0;
    .bt_box{
        display: flex;
        justify-content: space-around;
        width: vw(750);
        height: vw(110);
        background-color: #fff;
        div {
            display: inline-block;
            width: vw(73);
            text-align: center;
            a {
                img {
                    width: vw(73);
                    height: vw(73);
                }
            }
        }
    }
}